<template>
  <div class="all">
    <div v-show="show">
      <el-button type="primary" @click="shop(MA)">添加公告</el-button>
      <table width="100%" cellspacing="0" class="One">
        <thead>
          <tr>
            <th>ID</th>
            <th>状态</th>
            <th>标题</th>
            <th>封面图</th>
            <th>内容</th>
            <th>时间</th>
            <th>管理操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(val, name) in items">
            <td>{{val.id}}</td>
            <td>{{val.zhuangTai}}</td>
            <td>{{val.title}}</td>
            <td><el-image :src="val.fengMian"></el-image></td>
            <td>{{val.content}}</td>
            <td>{{val.addTime}}</td>
            <td><i @click="shop(val)">修改</i> | <i @click="del(val)">删除</i></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-show="!show">
       <el-button type="primary" @click="shop()">返回列表</el-button>
       <table  width="100%" cellspacing="0" class="Two">
         <tbody>
           <tr>
             <th>声明标题</th>
             <td><el-input v-model="MA.title" placeholder="请输入标题"></el-input></td>
           </tr>
           <tr>
             <th>状态</th>
             <td>
                 <el-radio v-model="MA.zhuangTai" label="未开始">未开始</el-radio>
                 <el-radio v-model="MA.zhuangTai" label="正在进行">正在进行</el-radio>
                 <el-radio v-model="MA.zhuangTai" label="已结束">已结束</el-radio>
             </td>
           </tr>
           <tr>
             <th>声明内容</th>
             <td>
               <el-input class="text" :rows="2" placeholder="请输入内容" v-model="MA.content" maxlength='255' ></el-input>
             </td>
           </tr>
           <tr>
             <th>封面图</th>
             <td>
                <el-image v-if="MA.fengMian" :src="MA.fengMian">
                </el-image>
              <input type="file" @change="uploadPhoto($event)" :id="id" name="image" class="getImgUrl_file"/>
             </td>
           </tr>
         </tbody>
         <button @click="Submit()">提交</button>
       </table>
    </div>
  </div>
</template>

<script>
  export default{
    inject:["reload"],
    data(){
      return{
        items:[
          {
            id:1,
            title:'LOL争霸赛',
            content:'asdasdasdasdasd',
            addTime:'2020-05-15',
            fengMian:'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
            zhuangTai:'已结束'

          }
        ],
        show:true,
         MA:{
         },
         date:'',
         id:'img-1',
      }
    },
    methods:{
      //提交
      Submit(){
        var _this=this
        var url
        if(this.MA.id){
          url='admin/announce/mod'
          if(this.date){
            var reader = new FileReader();
            reader.readAsDataURL(this.date);
            reader.onload = function (e) {
                // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
                  var imgcode = e.target.result.slice(23);
                    _this.upload(imgcode,_this.MA.title,url)
            }
          }else{
            _this.Postdata(url,_this.MA)
          }

        }else{
          url='admin/announce/add'
          var reader = new FileReader();
          reader.readAsDataURL(this.date);
          reader.onload = function (e) {
              // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
                var imgcode = e.target.result.slice(23);
                  _this.upload(imgcode,_this.MA.title,url)
          }
        }
      },
      //删除
      del(e){
        var _this=this
           this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         _this.Postdata('admin/announce/delete',e)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        
      },
      //上传
     uploadPhoto(e) {
           if (e.target.files[0].size > 3145728) {
               // 图片大于3MB
               this.$alert('照片质量大于3M', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {}
                });
           }else{
            let files = document.getElementById(this.id).files[0]
            this.MA.fengMian =this.getObjectURL(files)
             console.log(this.MA.fengMian)
             this.date= e.target.files[0];}
     },
     //获取本地地址
         getObjectURL (file) {
           let url = null ;
           if (window.createObjectURL!=undefined) { // basic
             url = window.createObjectURL(file) ;
           }else if (window.webkitURL!=undefined) { // webkit or chrome
             url = window.webkitURL.createObjectURL(file) ;
           }else if (window.URL!=undefined) { // mozilla(firefox)
             url = window.URL.createObjectURL(file) ;
           }
           return url ;
         },
         shop(e){
           if(this.show){
             this.show=false
             this.MA=JSON.parse(JSON.stringify(e))
           }else{
             this.show=true
              this.MA=""
           }
         },
         //数据请求
         Postdata(url,e){
           var _this=this
           this.$axios({
             method: "POST",
             url: '/api/'+url,
             headers: {'Content-Type': 'application/json'},
             data: {
                adminName:_this.$cookies.get('adminName'),
                token:_this.$cookies.get('token'),
                id:e.id,
                title:e.title,
                content:e.content,
                fengMian:e.fengMian,
                zhuangTai:e.zhuangTai,
               },
             }).then(function(response){
                if(response.data.code==0){
                  if(response.data.data!=null){
                    _this.items=response.data.data
                  }else{
                    _this.$alert("操作成功", '提示', {
                       confirmButtonText: '确定',
                       callback: action => {
                         //刷新
                         _this.reload()
                       }
                     });
                  }
                }else{
                  _this.$alert(response.data.desc, '提示', {
                     confirmButtonText: '确定',
                     callback: action => {
                       _this.reload()
                     }
                   });
                }
                console.log(response)
              })
              .catch(function(error){
                console.log(error)
              })
         },
         //照片上传
         upload(data,name,url){
           var _this=this
           this.$axios({
             method: "POST",
             url: '/api/admin/announce/img/upload',
             headers: {'Content-Type': 'application/json'},
             data: {
                adminName:_this.$cookies.get('adminName'),
                token:_this.$cookies.get('token'),
                img:data,
                name:name
               },
             }).then(function(response){
                _this.MA.fengMian=response.data.data.imgUrl
                _this.Postdata(url,_this.MA)
                console.log(response)
              })
              .catch(function(error){
                console.log(error)
              })
         }
    },
    mounted() {
      this.Postdata('admin/announce/getAll',this.MA)
    }
  }
</script>

<style scoped>
.el-image{
  width: 200px;
height: 150px;
}
table{
  margin-top: 10px;
  border-top: 1px solid #eee;
}
.One th{

  background-color: #E4E4E4;
  height: 30px;
}
tr{ text-align: center;}
td{
  border-bottom: 1px solid #eee;
  padding: 8px 0 0 8px;
}
.Two td{
  height: 50px;
}
.Two th{
    border-bottom: 1px solid #eee;
    text-align: right;
   padding: 8px 0 0 8px;
   font-weight: normal;
   padding-right: 5px;
}
.Two td{
  text-align: left;
}
.el-input{
  width: 15%;
}
.text{
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
}
</style>
